<template>
    <tab-bar>
        <tab-bar-item path="/home" activeColor="blue">
            <img slot="item-icon" src="@assets/img/tabbar/首页.svg" alt="">
            <img slot="item-icon-active" src="@assets/img/tabbar/首页默认.svg" alt="">
            <div slot="item-text">Header</div>
        </tab-bar-item>
        <tab-bar-item path="/category" activeColor="blue">
            <img slot="item-icon" src="@assets/img/tabbar/首页.svg" alt="">
            <img slot="item-icon-active" src="@assets/img/tabbar/首页默认.svg" alt="">
            <div slot="item-text">List</div>
        </tab-bar-item>
        <tab-bar-item path="/profile" activeColor="green">
            <img slot="item-icon" src="@assets/img/tabbar/产品.svg" alt="">
            <img slot="item-icon-active" src="@assets/img/tabbar/产品默认.svg" alt="">
            <div slot="item-text">Footer</div>
        </tab-bar-item>
        <tab-bar-item path="/shopcart" activeColor="red">
            <img slot="item-icon" src="@assets/img/tabbar/消息.svg" alt="">
            <img slot="item-icon-active" src="@assets/img/tabbar/消息默认.svg" alt="">
            <div slot="item-text">Father</div>
        </tab-bar-item>

    </tab-bar>
</template>

<script>
  import TabBar from "./tabbar/Tabbar";
  import TabBarItem from "./tabbar/TabbarItem";
  export default {
    name: "MainTabBar",
    components:{
      TabBar,
      TabBarItem
    }
  }
</script>

<style scoped>

</style>
